<template>
   <div>
       <el-row :gutter="20">
           <el-col :span="15">
               <span class="header-text">个人资料</span>
               <p>您可以在下面得表单中查看自己当前得个人信息，或者进行修改，若有修改，请在修改完后，</p>
               <p>选择下方得按钮完成保存您的修改</p>
               <p>或是在侧边得栏目，查看当前账号名下绑定得自动饮料贩卖机栏目</p>
               <el-divider class="hr" style="padding: 0;margin: 0"></el-divider>
               <el-form ref="form" :model="form" label-width="80px" v-loading="changeLoading">
                   <el-form-item label="账户名" :label-width="labelWidth">
                       <el-input v-model="form.user.userName" :disabled="true"></el-input>
                   </el-form-item>
                   <el-form-item label="账户密码" :label-width="labelWidth">
                       <el-input type="password" v-model="form.user.password" ></el-input>
                   </el-form-item>
                   <el-form-item label="账户授权码" :label-width="labelWidth">
                       <el-input v-model="form.user_inform.licenseKey" ></el-input>
                   </el-form-item>
                   <el-row>
                       <el-col :span="8">
                           <el-form-item label="地址经度" :label-width="labelWidth">
                               <el-input type="input" v-model="form.user_inform.longitude"></el-input>
                           </el-form-item>
                       </el-col>
                       <el-col :span="8">
                           <el-form-item label="地址纬度" :label-width="labelWidth">
                               <el-input type="input" v-model="form.user_inform.latitude"></el-input>
                           </el-form-item>
                       </el-col>
                       <el-col :span="8">
                           <el-button type="success" style="width: 50%;" @click="positionFormVisible = true">自动获取</el-button>
                       </el-col>
                   </el-row>
                   <el-form-item label="详细信息" :label-width="labelWidth">
                       <el-input type="textarea" v-model="form.user_inform.detail "></el-input>
                   </el-form-item>
                   <el-form-item>
                       <el-button type="primary" @click="informationChange">保存修改</el-button>
                       <el-button @click="informationReStore">还原</el-button>
                   </el-form-item>
               </el-form>
           </el-col>
           <el-col :span="9">
               <el-card v-loading="clientFinLoading">
                   <div style="float: left">
                       <span><i class="el-icon-s-custom"></i>子模块列表</span>
                   </div>
                   <el-table :data="tableData" style="width: 100%" >
                       <el-table-column label="创建日期" width="180">
                           <template slot-scope="scope">
                               <i class="el-icon-time"></i>
                               <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
                           </template>
                       </el-table-column>
                       <el-table-column label="详细" width="150">
                           <template slot-scope="scope">
                               <el-popover trigger="hover" placement="top">
                                   <p>经度: {{ scope.row.slongitude }}, 纬度: {{ scope.row.slatitude }}</p>
                                   <p>详细: {{ scope.row.sdetails }}</p>
                                   <p>隶属账户: {{ scope.row.serverAccount }}</p>
                                   <div slot="reference" class="name-wrapper">
                                       <el-tag size="medium">详细</el-tag>
                                   </div>
                               </el-popover>
                           </template>
                       </el-table-column>
                       <el-table-column label="操作">
                           <template slot-scope="scope">
                               <el-button
                                       size="mini"
                                       type="danger"
                                       @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                           </template>
                       </el-table-column>
                   </el-table>
                   <div class="block">
                       <el-pagination layout="prev, pager, next" :total="50"></el-pagination>
                   </div>
               </el-card>
           </el-col>
       </el-row>

       <el-dialog title="自动获取地址" :visible.sync="positionFormVisible" width="40%">
           <el-tabs type="card"  value="first">
               <el-tab-pane label="通过地址获取" name="first">
                   <el-row>
                       <el-col :span="20">
                           <el-form :model="position">
                               <el-form-item label="请输入地址" :label-width="formLabelWidth">
                                   <el-input v-model="position.path" autocomplete="off" placeholder="北京市朝阳区阜荣街10号"></el-input>
                               </el-form-item>
                           </el-form>
                       </el-col>
                       <el-col :span="4">
                           <el-button type="success" class="el-icon-search"
                                      @click="addressGeocoder" style="float: left"> 搜索</el-button>
                       </el-col>
                   </el-row>
                   <div id="el-map-container-geolocation" class="amap-style"
                        style="background-color: #ffffff"></div>
               </el-tab-pane>
<!--               <el-tab-pane label="通过browser自动获取" name="second">-->
<!--                   <el-button type="success" class="el-icon-search"-->
<!--                              @click="browerGeocoder" style="margin-bottom: 20px"> 自动获取</el-button>-->
<!--                   <div id="el-map-container-browlocation" class="amap-style"-->
<!--                        style="background-color: #ffffff"></div>-->
<!--               </el-tab-pane>-->
           </el-tabs>
           <div slot="footer" class="dialog-footer">
               <el-button @click="geocoderButtonReduction">取 消</el-button>
               <el-button type="primary" @click="geocoderButtonTrue">确 定</el-button>
           </div>
       </el-dialog>

   </div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                // 统一表单中的label宽度
                labelWidth: 100 + 'px',
                map: null,
                // 自定义位置定位的表单显示标识符
                positionFormVisible: false,
                // 表单修改的后的等待显示标识符
                changeLoading: false,
                // 周期性的调整查看当前服务器的等待显示标识符
                clientFinLoading: false,
                formLabelWidth: '120px',
                position: {
                    // 用于在定位时用的表单
                    path: '',
                    longitude: 0.00,
                    latitude: 0.00,
                },
                // 用于储存旧式的数据
                dataForm:{
                    user:{
                        userName: '',
                        password: '',
                    },
                    user_inform:{
                        licenseKey: '',
                        longitude: 0.00,
                        latitude: 0.00,
                        detail:''
                    }
                },
                // 用于个人信息直接操作的表单
                form: {
                    user:{
                        userName: '',
                        password: '',
                    },
                    user_inform:{
                        licenseKey: '',
                        longitude: 0.00,
                        latitude: 0.00,
                        detail:''
                    }
                },

                tableData: [],

            }
        },
        methods:{
            store: function(name, form){
                window.sessionStorage.setItem(name, JSON.stringify(form));
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            addressGeocoder(){
                let dire = this;
                // 调用高德地址的api
                dire.map = new AMap.Map("el-map-container-geolocation");
                let geocoder = new AMap.Geocoder();
                let marker = new AMap.Marker();
                geocoder.getLocation(dire.position.path, function(status, result){
                    if (status === 'complete'&&result.geocodes.length) {
                        let lnglat = result.geocodes[0].location;
                        marker.setPosition(lnglat);
                        dire.position.longitude = lnglat.toString().split(',')[0];
                        dire.position.latitude = lnglat.toString().split(',')[1];
                        dire.map.add(marker);
                        dire.map.setFitView(marker);
                        dire.$message.success('查询成功');
                    }else{
                        // log.error('根据地址查询位置失败');
                        dire.$message.error('根据地址查询位置失败');
                    }
                });
            },
            // browerGeocoder(){
            // 根据浏览器查找具体地址
            //     AMap.plugin('AMap.Geolocation', function() {
            //         let dire = this;
            //         dire.map = new AMap.Map("el-map-container-geolocation");
            //         let marker = new AMap.Marker();
            //         var geolocation = new AMap.Geolocation({
            //             enableHighAccuracy: true,//是否使用高精度定位，默认:true
            //             timeout: 10000,          //超过10秒后停止定位，默认：5s
            //             position:'RB',    //定位按钮的停靠位置
            //             buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            //             zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
            //         });
            //         map.addControl(geolocation);
            //         geolocation.getCurrentPosition(function(status,result){
            //             if(status === 'complete'){
            //                 let lnglat = result.geocodes[0].location;
            //                 marker.setPosition(lnglat);
            //                 dire.form.longitude = lnglat.toString().split(',')[0];
            //                 dire.form.latitude = lnglat.toString().split(',')[1];
            //                 dire.map.add(marker);
            //                 dire.map.setFitView(marker);
            //             }else{
            //                 onError(result)
            //             }
            //         });
            //     });
            //
            // },
            geocoderButtonTrue(){
                // 选择确认按钮后，将数据暂存
                this.form.user_inform.longitude = this.position.longitude;
                this.form.user_inform.latitude = this.position.latitude;
                this.geocoderButtonReduction();
            },
            geocoderButtonReduction(){
                // 选择取消按钮后， 将数据还原
                if(this.map !== null){
                    this.map.destroy();
                }
                this.positionFormVisible = false;
            },
            informationChange: async function () {
                // 保存修改，将数据发送到后台进行数据的持久化
                let data = "";
                this.changeLoading = true;
                // 将账号信息封装
                var param = new FormData();
                param.append("account", this.form.user.userName);
                param.append("password", this.form.user.password);
                param.append("licenseKey", this.form.user_inform.licenseKey);
                param.append("longitude", this.form.user_inform.longitude);
                param.append("latitude", this.form.user_inform.latitude);
                param.append("detail", this.form.user_inform.detail);
                await this.$http.post("/api/account/modify", param)
                    .then(function (response) {
                        data = response.data;
                    });
                if (data){
                    this.dataForm.user = Object.assign({}, this.form.user);
                    this.dataForm.user_inform = Object.assign({},this.form.user_inform);
                    this.store('user', this.form.user);
                    this.store('userInform', this.form.user_inform);
                    this.$message.success("修改成功");
                } else{
                    // 如果登入有问题，则执行下面的处理
                    this.$message.error("修改出现问题");
                }
                this.changeLoading = false;
            },
            informationReStore: function () {
                // 数据还原功能
                this.form.user = Object.assign({}, this.dataForm.user);
                this.form.user_inform = Object.assign({}, this.dataForm.user_inform);
            },
            // 子服务器表单显示的查询方法
            clientFinderFunc: function () {
                this.clientFinLoading = true;
                var win = this;
                var param = new FormData();
                param.append("serve-account", this.form.user.userName);
                this.$http.post("/api/subsystem/obtain", param).then(function(response){
                    if(response !== null){
                        win.tableData = response.data;
                    }
                });
                this.clientFinLoading = false;
            }
        },mounted() {
            var user = JSON.parse(window.sessionStorage.getItem("user"));
            var userInform = JSON.parse(window.sessionStorage.getItem("userInform"));
            this.form.user = Object.assign({}, user);
            this.dataForm.user = Object.assign({}, user);
            this.form.user_inform = Object.assign({}, userInform);
            this.dataForm.user_inform = Object.assign({}, userInform);
            // 周期性的获取当前服务器对应的子服务器
            // 采用异步的手法进行加载，如果加载完毕则等待消失
            this.clientFinderFunc();
        }
    }
</script>

<style scoped>
    .header-text{
        font-size: 35px;
        font-weight: bold;
    }
    .amap-style{
        height: 250px;
    }
</style>
